<template>
  <teleport to="#header">
    <van-nav-bar title="项目列表" :fixed="true" safe-area-inset-top />
  </teleport>
  <van-tabs v-model:active="active">
    <van-tab title="标签1" name="1">
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in state.list" :key="item.id">
          <van-cell is-link center>
            <p><b>{{ item.name }}</b></p>
            <p>{{ item.desc }}</p>
          </van-cell>
        </van-cell>
      </van-list>
    </van-tab>
    <van-tab title="标签2" name="2">内容 2</van-tab>
  </van-tabs>
</template>
<script>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'Projects',
  setup() {
    const state = reactive({
      active: 1,
      loading: false,
      finished: false,
      list: [],
    })
    const onLoad = () => {
      state.loading = true
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        const list = new Array(10).fill('').map((_, id) => ({ id, name: `Name${id}`, desc: `desc${id}` }))
        state.list.push(...list)

        // 加载状态结束
        state.loading = false
        
        // 数据全部加载完成
        if (state.list.length >= 40) {
          state.finished = true
        }
      }, 1000)
    }
    return {
      state,
      onLoad,
    }
  },
})
</script>
